<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生活周边 - 魅族官网</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/types.css">
    <script src="js/jquery-1.11.3.js"></script>
</head>

<body>
    <div id="app">
        <!-- 顶部（需替换） -->
        <div id="header">
            <div class="h_con public">
                <div class="logo">
                    <h1>
                        <a href="index.html">meizu</a>
                    </h1>
                </div>
                <ul class="h_con_ul1">
                    <li><a href="typesPhones.html">手机</a></li>
                    <li><a href="typesLipro.html">Lipro</a></li>
                    <li><a href="typesSound.html">声学</a></li>
                    <li><a href="typesFittings.html">配件</a></li>
                    <li><a href="typesLife.html">生活</a></li>
                    <li><a href="#">Flyme</a></li>
                    <li><a href="server.html">服务</a></li>
                    <li><a href="#">专卖店</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="qyfw.html">企业服务</a></li>
                    <li><a href="#">APP下载</a></li>
                </ul>
                <ul class="h_con_ul2">
                    <li>
                        <form>
                            <input type="text" placeholder="魅族 18">
                            <span></span>
                        </form>
                    </li>
                    <li>
                        <a href="javascript:;"></a>
                    </li>
                    <li>
                        <a href="javascript:;"><span>0</span></a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- banner -->
        <div class="listbanner">
            <div class="banner-cont life"></div>
        </div>

        <!-- main -->
        <div class="main">
            <div class="list-container">
                <h1 class="list-title">
                    <div class="title-info">生活周边</div>
                    <div class="title-select">
                        <div class="title-select-cont">
                            <a href="javascript:;">推荐</a>
                            <a href="javascript:;">新品</a>
                            <a href="javascript:;">价格</a>
                            <span class="but_i"></span>
                            <span class="but_u"></span>
                        </div>
                    </div>
                </h1>
                <div class="goods-list">
                    <ul class="goods-list-ul">
                        <li class="gl-item">
                            <a href="javascript:;" class="gl-item-link">
                                <img src="./images/types/other/life1.jpg" alt="">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                </ul>
                                <h3 class="item-title">PANDAER 「龍」T 恤</h3>
                                <p class="item-desc">极光印花 | 宽松剪裁 | 丝绸手感 | 抗皱无毛刺</p>
                                <p class="item-price">
                                    <em>￥</em>
                                    <span>129</span>
                                </p>
                            </a>
                        </li>
                        <li class="gl-item">
                            <a href="javascript:;" class="gl-item-link">
                                <img src="./images/types/other/life2.jpg" alt="">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                </ul>
                                <h3 class="item-title">PANDAER 中华白海豚 T 恤</h3>
                                <p class="item-desc">中华白海豚公益定制 | 100％ 优质 50S 新疆长绒棉 | 液氨整理技术 | 丝绸手感 | 抗皱无毛刺</p>
                                <p class="item-price">
                                    <em>￥</em>
                                    <span>129</span>
                                </p>
                            </a>
                        </li>
                        <li class="gl-item">
                            <a href="javascript:;" class="gl-item-link">
                                <img src="./images/types/other/life3.jpg" alt="">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                </ul>
                                <h3 class="item-title">魅族 City Walk 双肩包</h3>
                                <p class="item-desc">【新品上市 | 现货发售】多仓收纳 | 立体型裁 | 生活防水 | 减压耐磨</p>
                                <p class="item-price">
                                    <em>￥</em>
                                    <span>139</span>
                                </p>
                            </a>
                        </li>
                        <li class="gl-item">
                            <a href="javascript:;" class="gl-item-link">
                                <img src="./images/types/other/life4.jpg" alt="">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                </ul>
                                <h3 class="item-title">魅族防飞溅声波电动牙刷</h3>
                                <p class="item-desc">【限时领券 | 券后价179元】智能压感防飞溅 | 超强震动清洁 | FDA 杜邦软毛 | 30天超长续航 | IPX7 级防水全身防霉防污垢 | 四种模式全面呵护</p>
                                <p class="item-price">
                                    <em>￥</em>
                                    <span>299</span>
                                </p>
                            </a>
                        </li>
                        <li class="gl-item">
                            <a href="javascript:;" class="gl-item-link">
                                <img src="./images/types/other/life5.jpg" alt="">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                </ul>
                                <h3 class="item-title">PANDAER 18 系列 T 恤</h3>
                                <p class="item-desc">【限定款上市 | 部分款式、码数少量库存】100％ 优质 50S 新疆长绒棉 | 液氨整理技术 | 3D 潮酷印花 | 丝绸手感 | 抗皱无毛刺</p>
                                <p class="item-price">
                                    <em>￥</em>
                                    <span>129</span>
                                </p>
                            </a>
                        </li>
                        <li class="gl-item">
                            <a href="javascript:;" class="gl-item-link">
                                <img src="./images/types/other/life6.jpg" alt="">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                </ul>
                                <h3 class="item-title">Pandaer 魔术师帽衫</h3>
                                <p class="item-desc">Magic Pandaer前卫设计 | 100％精梳棉纱 | 潮流款式 挺括有型 | 亲肤内衬 柔顺舒适 | 情侣装</p>
                                <p class="item-price">
                                    <em>￥</em>
                                    <span>199</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="list-adv-img">
                    <a href="javascript:;"><img src="./images/types/list-bot.jpg" alt=""></a>
                </div>
                <div class="list-rec">
                    <h2 class="list-title">
                        <div class="title-info">为您推荐</div>
                    </h2>
                    <div class="list-rec-banner">
                        <div class="list-rec-banner-view">
                            <ul class="list-rec-banner-wrap">
                                <li>
                                    <div class="rec-pic"><img src="images/types/phone (1).png" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/phone (2).png" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/phone (3).png" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/phone (4).png" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/erji (1).jpg" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/erji (3).jpg" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/erji (4).jpg" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/peijian (1).png" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="rec-pic"><img src="images/types/peijian (2).png" alt=""></div>
                                    <div class="rec-desc">
                                        <h4>魅族 18</h4>
                                        <p class="item-price">
                                            <em>￥</em>
                                            <span>3999</span>
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
    
                    </div>
    
                </div>
            </div>
            <div class="list-rec-banner-dot">
                <ul>
                    <li class="list-rec-banner-dot-visited"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!-- footer -->
        <footer id="footer">
            <div class="container public">
                <div class="top clearfix">
                    <ul>
                        <li><a href="#"><img src="./images/types/shunfeng.png" alt=""><span>满80免运费</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/d28eac8b-b915-49dc-9dbd-80884a07d44f.png" alt=""><span>100+ 城市次日送达</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/b21f3e65-f7f4-4693-914c-c070faf96770.png" alt=""><span>7天无理由退货</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/1998f0da-a439-4e07-9736-e6a1c39fb0ae.png" alt=""><span>15天换货保障</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/420825c1-4763-436d-b3e1-721651ccc70c.png" alt=""><span>1年免费保修</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/1c5cfeff-1b35-499e-bc2a-1fd29305be69.png" alt=""><span>上门快修</span></a></li>
                    </ul>
                    <div class="r">
                        <span>周一至周日 8:00-20:00</span>
                        <p>400-788-3333</p>
                        <a href="#">在线客服</a>
                    </div>
                </div>
                <hr>
                <div class="bottom">
                    <div class="le">
                        <ul class="clearfix">
                            <li><a href="#">了解魅族</a></li>
                            <li><a href="#">加入我们</a></li>
                            <li><a href="#">联系我们</a></li>
                            <li><a href="#">Flyme</a></li>
                            <li><a href="#">魅族社区</a></li>
                            <li><a href="#">天猫旗舰店</a></li>
                            <li><a href="#">问题反馈</a></li>
                            <li><a href="#">线上销售授权名单公示</a></li>
                            <li><a href="#">出版物经营许可证</a></li>
                            <li>
                                <a href="#"><i class="guoqi"></i>简体中文</a>
                                <div class="box">
                                    <ul>
                                        <li><a href="#"><i class="i1"></i><span>简体中文</span></a></li>
                                        <li><a href="#"><i class="i2"></i><span>繁體中文</span></a></li>
                                        <li><a href="#"><i class="i3"></i><span>English</span></a></li>
                                        <li><a href="#"><i class="i4"></i><span>Русский</span></a></li>
                                        <li><a href="#"><i class="i5"></i><span>Türkiye</span></a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                        <div class="te">
                            ©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#">粤ICP备13003602号</a>
                            <a href="#">合字B2-20170010 </a>
                            <a href="#">营业执照</a>
                            <a href="#">法律声明</a>
                            <a href="#">粤公网安备 44049102496009 号</a>
                            <a href="#"><i class="te_i1"></i></a>
                            <a href="#"><i class="te_i2"></i></a>
                            <a href="#"><i class="te_i3"></i></a>
                        </div>
                    </div>
                    <div class="r">
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                        <span></span>
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                        <span></span>
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                        <span></span>
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                     
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>
<script src="js/types.js"></script>